
<!--官网市场-->
<style scoped>
.body-div{
    height: 100%;
    width: 100%;
    overflow-y: hidden;
}
.content-body{
    width: 100%;
    height: 95%;
    overflow: hidden;
    ::-webkit-scrollbar{
        display: none;
    }

}
.content-foot{
    width: 100%;
    height: 55%;
    background-color: white;
}
.box-content{
    width: 100%;
    height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: 1%;
    margin-top: 10px;
    overflow-y: scroll;

}
.box-null{
    width: 98%;
    height: 100px;
    border-radius: 10px;
    margin-top: 2px;
    color: gainsboro;
}
.null-data{
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.box-body-list{
    width: 100%;
    height: 100%;
    border-radius: 10px;
    display: flex;
}
.box-body{
    width: 98%;
    height: 50px;
    background-color: #b6a2fd;
    border-radius: 10px;
    margin-top: 2px;
    display: flex;
    color: white;
}
.box-body-div{
    width: 15%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width:85px ;
}
.box-span-id{
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.box-image{
    width: 45px;
    height: 45px;
    margin-left: 30px;
    border-radius: 50%;
}
.box-body-div1{
    width: 55%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.box-body-div2{
    width: 15%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.box-body-div3{
    width: 15%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width:100px ;
}
</style>

<template>
    <div class="body-div">
        <div class="content-body">
            <div class="box-content">
                <div :class="item.id==null?'box-null':'box-body'" v-for="(item,index) in data.list"  >
                    <div v-if="item.id==null" class="box-body-list null-data" style="height: 100px" >
                        <span>没有更多数据了</span>
                    </div>
                    <div v-else class="box-body-list">
                        <!--序号和图片-->
                        <div class="box-body-div">
                            <span class="box-span-id">{{index+1}}</span>
                            <el-image :src="item.image" class="box-image" />
                        </div>
                        <!--标题-->
                        <div class="box-body-div1">
                            <span>{{item.name}}</span>
                        </div>
                        <!--类型-->
                        <div class="box-body-div2">
                            <span>{{item.title}}</span>
                        </div>
                        <!--按钮-->
                        <div class="box-body-div3">
                            <el-popconfirm
                                confirm-button-text="删除"
                                cancel-button-text="取消"
                                :icon="InfoFilled"
                                icon-color="#626AEF"
                                title="是否确认删除该数据?"
                                @confirm="delWebsite(item.id)"
                            >
                                <template #reference>
                                    <el-button type="danger">删除</el-button>
                                </template>
                            </el-popconfirm>
                            <el-button type="success" @click="openOfficialWebsite(item)">修改</el-button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="content-foot"></div>
    </div>
    <!--综合站点组件-->
    <div v-if="data.delShow">
        <official-website-dialog :website-list="data.websiteList" @receiveWebsite="receiveWebsite"/>
    </div>
</template>

<script lang="ts" setup>
import {selItem,delItemList} from "../request/request.js"
import {onMounted, ref} from "vue";
import OfficialWebsiteDialog from "../components/officialWebsiteDialog.vue";
import {ElMessage} from "element-plus";
import {InfoFilled} from "@element-plus/icons-vue";

const data=ref({
    list:[],//数据列表
    modelList:[],//存根数据
    delShow:false,//删除
    delId:null,//删除数据的id
    websiteList:{},//组件修改的参数
})

onMounted(()=>{
    selList();
})

/**
 * @type{{查询数据}}
 */
function selList(){
    selItem().then((res)=>{
        if (res.code==200){
            let itemList=res.data.list;
            let itemCate=res.data.name;
            itemList.forEach(item=>{
                item.title=itemCate[item.cateid-1].name
            })
            itemList.push({id:null})
            data.value.modelList=itemList;
            data.value.list=itemList;
        }

    })
}

/**
 * @type{{删除数据}}
 */
function delWebsite(e){
    delItemList({id:e}).then((res)=>{
        if (res.code==200){
            selList();
            ElMessage.success('删除成功')
        }else {
            ElMessage.error('删除失败')
        }
    })
}

/**
 * @type{{综合站点}}
 * @param{{打开组件,修改数据}}
 */
function openOfficialWebsite(e) {
    data.value.websiteList={
        id:e.id||null,
        cateid:e.cateid||null,
        name:e.name||null,
        image:e.image||null,
        url:e.url||null,
    };//传过去的值
    data.value.delShow=true;//打开组件
}
/**
 * @type{{综合站点}}
 * @param{{接收组件返回的数据}}
 */
function receiveWebsite(e){
    data.value.delShow=false;
}

</script>

